<template>
  <div class="duty flex">
    <div class="d-left">
<!--      <img :src="require('@/assets/images/exchange_4.svg')" alt=""/>-->
      <p style="text-align:center;margin:10px 0;font-weight: bold">责任终端总数</p>
    </div>
    <div class="flex">
      <div class="smallbox" v-for="(i,index) in dObj.num.toString().split('')" :key="index"> {{ i }}</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
  props: {
    dObj: {
      type: Object,
      default: {}
    }
  }
}
</script>

<style lang="scss" scoped>
.duty {
  width: 100%;
  height: 100px;
  //text-align:center;
  .d-left {
    width: 10%;
    height: 100%;
    text-align:center;
    img {
      height: 50px;
    }

    & + div {
      flex: 1;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: start;
    }
  }

  .smallbox {
    //width: 20%;
    //height: 100%;
    //background: url(../../../assets/images/judge/dbackground.png) no-repeat center center;
    width:40px;
    height:40px;
    line-height:40px;
    background:#fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 38px;
    color: #66FFFF;
    font-weight: 700;
  }
}
</style>
